<template>
  <div class="add-record-form">
    <van-nav-bar
      title="添加记录"
      left-text="取消"
      right-text="确定"
      @click-left="$emit('cancel')"
      @click-right="handleSubmit"
    />
    
    <van-form @submit="handleSubmit">
      <van-cell-group inset>
        <van-field
          v-model="selectedTypeText"
          name="recordType"
          label="记录类型"
          readonly
          is-link
          @click="showTypePicker = true"
        />
        
        <template v-if="form.recordType === 1">
          <van-field
            v-model="form.recordValue"
            name="recordValue"
            label="体重"
            type="number"
            placeholder="请输入体重"
            :rules="[{ required: true, message: '请输入体重' }]"
          >
            <template #right-icon>kg</template>
          </van-field>
        </template>
        
        <template v-if="form.recordType === 2">
          <van-field
            v-model="form.systolic"
            name="systolic"
            label="收缩压"
            type="number"
            placeholder="请输入收缩压"
            :rules="[{ required: true, message: '请输入收缩压' }]"
          >
            <template #right-icon>mmHg</template>
          </van-field>
          
          <van-field
            v-model="form.diastolic"
            name="diastolic"
            label="舒张压"
            type="number"
            placeholder="请输入舒张压"
            :rules="[{ required: true, message: '请输入舒张压' }]"
          >
            <template #right-icon>mmHg</template>
          </van-field>
        </template>
        
        <van-field
          v-model="form.remark"
          name="remark"
          label="备注"
          type="textarea"
          placeholder="请输入备注"
          rows="2"
          maxlength="200"
          show-word-limit
        />
      </van-cell-group>
    </van-form>
    
    <van-popup v-model:show="showTypePicker" position="bottom">
      <van-picker
        :columns="typeColumns"
        @confirm="onTypeConfirm"
        @cancel="showTypePicker = false"
        :default-index="form.recordType - 1"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { showToast } from 'vant'

const emit = defineEmits(['submit', 'cancel'])

const showTypePicker = ref(false)

const typeColumns = [
  { text: '体重', value: 1 },
  { text: '血压', value: 2 }
]

const form = reactive({
  recordType: 1,
  recordValue: '',
  systolic: '',
  diastolic: '',
  remark: ''
})

// 计算当前选中的类型文本
const selectedTypeText = computed(() => {
  const selected = typeColumns.find(item => item.value === form.recordType)
  return selected ? selected.text : ''
})

const onTypeConfirm = (value) => {
  form.recordType = value.value
  showTypePicker.value = false
  // 切换类型时清空相关字段
  form.recordValue = ''
  form.systolic = ''
  form.diastolic = ''
}

const handleSubmit = () => {
  // 表单验证
  if (form.recordType === 1 && !form.recordValue) {
    showToast('请输入体重')
    return
  }
  if (form.recordType === 2 && (!form.systolic || !form.diastolic)) {
    showToast('请输入完整的血压数据')
    return
  }

  const data = {
    recordType: form.recordType,
    recordValue: form.recordType === 1 ? form.recordValue : `${form.systolic}/${form.diastolic}`,
    remark: form.remark
  }
  emit('submit', data)
}
</script>

<style lang="scss" scoped>
.add-record-form {
  .van-cell-group {
    margin: 12px 0;
  }
}
</style> 